﻿<CodeSnippetTabbed DocLink="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTagBox-2#tag-template">
<CodeSnippetTabPage Text="Razor">
@(@"<DxTagBox Data=""@DataSource""
          TextFieldName=""@nameof(City.CityName)""
          TData=""City""
          TValue=""City""
          AllowCustomTags =""true""
          @bind-Tags=""@Tags"">
            <TagTemplate Context=""tagInfo"">
                @{
                    var styleMode = tagInfo.IsCustom ? ButtonRenderStyleMode.Contained: GetModeByID(tagInfo.DataItem.CountryId);
                    var style = tagInfo.IsCustom ? ButtonRenderStyle.Dark : ButtonRenderStyle.Primary;
                    <DxButton RenderStyle=""@style""
                              RenderStyleMode=""@styleMode""
                              Text=""@tagInfo.Text""
                              style=""display:inline-block"">
                        @context
                        <span @onclick=""@tagInfo.RemoveTagAction"">&times;</span>
                    </DxButton>
                }
            </TagTemplate>
</DxTagBox>

@code {
    List<City> DataSource { get; set; }
    IEnumerable<string> Tags { get; set; }

    ButtonRenderStyleMode GetModeByID(int countryId) {
        switch (countryId) {
            case 0: return ButtonRenderStyleMode.Contained;
            case 1: return ButtonRenderStyleMode.Outline;
            default: return ButtonRenderStyleMode.Text;
        }
    }

    protected override void OnInitialized() {
        base.OnInitialized();
        DataSource = CityData.Cities;
        Tags = new List<string>() { ""Los Angeles"", ""Tokyo"", ""Moscow"" };
    }
}")
</CodeSnippetTabPage>
<CodeSnippetTabPage Text="City">
@(@"public class City {
    public int Id { get; set; }
    public int CountryId { get; set; }
    public string CityName { get; set; }
}

public static class CityData {
    private static readonly Lazy<List<City>> cities = new Lazy<List<City>>(() => {
        return new List<City>() {
            new City() { Id = 0, CountryId = 0, CityName = ""Washington"" },
            new City() { Id = 1, CountryId = 0, CityName = ""New York"" },
            new City() { Id = 2, CountryId = 0, CityName = ""Los Angeles"" },
            new City() { Id = 3, CountryId = 1, CityName = ""Berlin"" },
            new City() { Id = 4, CountryId = 1, CityName = ""Munich"" },
            new City() { Id = 5, CountryId = 1, CityName = ""Hamburg"" },
            new City() { Id = 6, CountryId = 2, CityName = ""Tokyo"" },
            new City() { Id = 7, CountryId = 2, CityName = ""Osaka"" },
            new City() { Id = 8, CountryId = 2, CityName = ""Yokohama"" }
        };
    });
    public static List<City> Cities { get { return cities.Value; } }
}")
</CodeSnippetTabPage>
</CodeSnippetTabbed>
